import React from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { Layout } from '@components/layout';
import {
  Home,
  Settings,
  About,
  SystemInfo,
  Logs,
  FileManager,
  Performance,
} from '@pages/index';

import CrawlerTasks from '../pages/CrawlerTasks';

// Create router configuration
const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: 'settings',
        element: <Settings />,
      },
      {
        path: 'about',
        element: <About />,
      },
      {
        path: 'system-info',
        element: <SystemInfo />,
      },
      {
        path: 'logs',
        element: <Logs />,
      },
      {
        path: 'files',
        element: <FileManager />,
      },
      {
        path: 'performance',
        element: <Performance />,
      },

      {
        path: 'tasks',
        element: <CrawlerTasks />,
      },
      // Placeholder routes for sidebar navigation
      {
        path: 'data',
        element: (
          <div className="py-12 text-center">
            <h1 className="mb-4 text-2xl font-bold text-gray-900 dark:text-gray-100">
              Extracted Data
            </h1>
            <p className="text-gray-600 dark:text-gray-400">
              This page is under construction. View and export your crawled data
              here.
            </p>
          </div>
        ),
      },
      {
        path: 'notifications',
        element: (
          <div className="py-12 text-center">
            <h1 className="mb-4 text-2xl font-bold text-gray-900 dark:text-gray-100">
              Notifications
            </h1>
            <p className="text-gray-600 dark:text-gray-400">
              This page is under construction. Add your notification management
              features here.
            </p>
          </div>
        ),
      },
    ],
  },
]);

// Router component
const AppRouter: React.FC = () => {
  return <RouterProvider router={router} />;
};

export default AppRouter;
